<script setup lang="ts">
const props = withDefaults(defineProps<{
  data: {
    energyName: string
    energyType: string
    energyUnit: string
    data: number
  }[]
}>(), {
  data() {
    return []
  },
})
const defaultNumber = inject<(x: any) => string>('defaultNumber')

const lists = computed(() => {
  return props.data.map((item, index) => {
    return {
      label: item.energyName + (item.energyUnit ? `(${item.energyUnit})` : ''),
      key: item.energyType,
      value: defaultNumber ? defaultNumber(item.data) : item.data,
      icon: ['electric', 'gas', 'coal', 'other'][index % 4],
    }
  })
})

const itemWidth = computed(() => {
  return unref(lists).length > 7 ? '33.33%' : '50%'
})
</script>

<template>
  <div class="clearfix energy-overview">
    <div
      v-for="item of lists" :key="item.key" class="float-start item"
      :style="{
        width: itemWidth,
      }"
    >
      <div class="d-flex align-items-end" :class="`is-${item.icon}`">
        <div class="item-icon" />
        <div class="px-sm-1 py-sm-2 item-content">
          <span class="item-label">{{ item.label }}</span>
          <strong class="item-value">{{ item.value }}</strong>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$icon-size: 60px;
.energy-overview {
  width: 68.66%;
  max-height: 24vh;
  overflow: auto;
  scrollbar-width: none;
  &::-moz-scrollbar,
  &::-webkit-scrollbar {
    display: none;
  }
}
.item-icon {
  display: block;
  width: $icon-size;
  height: $icon-size;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  flex-shrink: 0;
}
.item-label,
.item-value {
  display: block;
}
.item-label {
  color: #ffffff;
  font-size: 13px;
}

$icons: (
  electric:#479FFE,
  gas:#E5B55B,
  coal:#90FFAD,
  other:#85B1FF
);
@each $icon,$color in $icons {
  .is-#{$icon} {
    .item-icon {
      background-image: url('./#{$icon}.png');
    }
    .item-value {
      color: $color;
    }
  }
}
</style>
